import React, {Component} from 'react';
import './List.css'
import PubSub from 'pubsub-js'

class List extends Component {
    state = {users: [], isFirst: true, isLoading: false, err: ''}

    componentDidMount() {
        this.token = PubSub.subscribe('atguigu', (_, stateObj) => {
            this.setState(stateObj);
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.token)
    }

    render() {
        const {users, isFirst, isLoading, err} = this.state
        return (
            <div>
                <div className="row">
                    {
                        isFirst ? <h2>欢迎使用,输入关键字，然后点击搜索</h2> :
                            isLoading ? <h2>加载中...</h2> :
                                err ? <h2 style={{color: 'red'}}>{err}</h2> :
                                    users.map((userObj) => {
                                        return (
                                            <div className="card" key={userObj.id}>
                                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                                    <img alt="head_protrait"
                                                         src={userObj.avatar_url}
                                                         style={{width: '100px'}}/>
                                                </a>
                                                <p className="card-text">{userObj.login}</p>
                                            </div>
                                        )
                                    })
                    }
                </div>
            </div>
        );
    }
}

export default List;